<template>
  <Modal v-model:visible="visible" title="域名管理" @cancel="close">
    <template #footer>
      <Button key="submit" type="primary" @click="submit">确认</Button>
      <Button key="back" @click="close">返回</Button>
    </template>
    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem label="子域名" name="name" :rules="[{ required: true, message: '请输入子域名' }]">
        <template v-if="!editable"
          ><Space
            >{{ formState.name }}<a @click="edit"><EditOutlined /></a></Space
        ></template>
        <Textarea :rows="4" v-if="editable" v-model:value="formState.name"></Textarea>
      </FormItem>
    </Form>
  </Modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { EditOutlined } from '@ant-design/icons-vue';
import { Modal, Textarea, Button, message, Form, FormItem, Space } from 'ant-design-vue';
import { editDn, getDnTable } from '/@/api/system-mgmt/tenant-app-mgmt/tenantApp';
import { EditDnParam } from '/@/api/system-mgmt/tenant-app-mgmt/model/tenantAppModel';
const formState = ref({} as EditDnParam);
const editable = ref(false);
const visible = ref(false);
let param = {
  appId: '',
  tenantCode: undefined,
};
const getDataSource = async () => {
  let data = await getDnTable(param);
  formState.value.name = data.name;
  formState.value.zoneName = data.zoneName;
};
const openEdit = (record, tenantCode) => {
  visible.value = true;
  formState.value.appId = String(record.appId);
  formState.value.tenantCode = tenantCode;
  param = { appId: String(record.appId), tenantCode };
  getDataSource();
};
const formRef = ref();
const close = () => {
  visible.value = false;
  editable.value = false;
  formRef.value.clearValidate();
  formState.value = {} as EditDnParam;
};

const edit = async () => {
  editable.value = true;
};

const submit = async () => {
  let formParams = formState.value;
  formRef.value.validate().then(async () => {
    let res = await editDn(formParams);
    if (res) {
      message.success('编辑成功，请将修改后的域名配置到DNS服务器');
    }
    close();
  });
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openEdit });
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
